<template>
    <div class="inviteCoursesDetailsBox">
        <!-- header -->
        <div class="invit-headerBox">
            <div class="public-header">
                <div class="public-header-ch">商战模拟</div> 
                <div class="public-header-en">ENTER SIMULATION</div> 
                <div class="public-header-line"></div>
            </div>
            <div class="header-logo">
                <img src="../../static/image/icon-title.png" alt="">
            </div>
        </div>
        <!-- header end-->

        <!-- content -->
        <div class="detailsContent">
            <router-link to="home" class="meetingRom"> <img src="../../static/image/camera.png" alt=""> 进入会议房间</router-link>
            <!-- courseContent -->
            <div class="courseContentBox">
                <!-- left -->
                <div class="course-leftBox">
                    <h3>课程名称：测试1</h3>
                    <div class="courseTimeBox" v-for="item in leftData" :key="item.id">
                        <div class="courseStratime" >
                            <h4>课程开始时间</h4>
                            <div class="startimeContent">
                                <div class="content-left mab">{{item.startDate}}</div>
                                <div class="content-right mab">{{item.startTime}}</div>
                            </div>
                        </div>
                        <div class="courseStratime">
                            <h4>课程结束时间</h4>
                            <div class="startimeContent">
                                <div class="content-left mab">{{item.endDate}}</div>
                                <div class="content-right mab">{{item.endTime}}</div>
                            </div>
                        </div>
                    </div>
                    <h3>课程申请邀请码：abcd1234</h3>
                </div>
                <!-- left end-->
                <!-- middle -->
                <div class="course-middleBox" >
                    <h3>      </h3>
                    <div class="courseTimeBox" v-for="item in middleData" :key="item.id">
                        <div class="courseStratime">
                            <h4>课程报名开始时间</h4>
                            <div class="startimeContent">
                                <div class="content-left mab">{{item.startDate}}</div>
                                <div class="content-right mab">{{item.startTime}}</div>
                            </div>
                        </div>
                        <div class="courseStratime">
                            <h4>课程报名结束时间（需提前课程开始时间24小时）</h4>
                            <div class="startimeContent">
                                <div class="content-left mab">{{item.endDate}}</div>
                                <div class="content-right mab">{{item.endTime}}</div>
                            </div>
                        </div>    
                    </div> 
                                                           
                </div>
                <!-- middle end-->
                <!-- right -->
                <div class="course-rightBox">
                    <h3>
                        <el-checkbox label="自动运行" name="type" class="courseCheck" :checked="runningshow" @change="runningshow = !runningshow"></el-checkbox>
                    </h3>
                    <div class="courseTimeBox" v-if="runningshow">
                        <div class="courseStratime" v-for="item in runningData" :key="item.id">
                            <h4>{{item.roundsNumber}}</h4>
                            <div class="startimeContent">
                                <div class="content-left mabt">{{item.roundsDate}}</div>
                                <div class="content-right mabt">{{item.roundsTime}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="courseBtn">
                        <router-link to='home' class="btn">
                            <img src="../../static/image/icon-eye.png" alt="">
                            <span>课程后台</span>
                        </router-link>
                        <button class="btn">
                            <img src="../../static/image/icon-write.png" alt="">
                            <span>编辑详情</span>
                        </button>
                    </div>

                </div>
                <!-- right end-->
            </div>
            <!-- courseContent end-->

        </div>
        <!-- content end-->

    </div>
</template>
<script>
    export default {
        data(){
            return {
                // 左侧数据
                leftData:[
                    {
                        startDate:'2018/01/13 (周六)',
                        startTime:'10：30（上午）',
                        endDate:'2018/01/21 (周一）',
                        endTime:'12:00 （下午）'
                    },
                    
                ],
                middleData:[
                    {
                        startDate:'2018/01/13 (周六)',
                        startTime:'10：30（上午）',
                        endDate:'2018/01/21 (周一）',
                        endTime:'12:00 （下午）'
                    },
                    
                ],
                runningData:[
                    {
                        roundsNumber:'第1轮',
                        roundsDate:'2018/01/01 （周一）',
                        roundsTime:'10：30 （上午）'
                    },
                    {
                        roundsNumber:'第2轮',
                        roundsDate:'2018/01/02 （周二）',
                        roundsTime:'11：30 （下午）'
                    },
                    {
                        roundsNumber:'第3轮',
                        roundsDate:'2018/01/03 （周三）',
                        roundsTime:'12：30 （上午）'
                    },
                    {
                        roundsNumber:'第4轮',
                        roundsDate:'2018/01/05 （周四）',
                        roundsTime:'1：30 （下午）'
                    },
                ],
                // 自动运行显示
                runningshow: false,

            }
        },
        methods:{
            // 自动运行显示隐藏
            //  runningBox(){
            //      if(this.checkbox == true){
            //          this.runningshow = true;
            //      }else{
            //          this.runningshow = false;
            //      }
            //  }

        }
    }
</script>

